<template>
  <div class="logForm" style="height: 100%; margin-top: 1rem">
    <el-form
      :model="logForm"
      :rules="rules"
      ref="logForm"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input
          clearable
          v-model="logForm.username"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          clearable
          type="password"
          v-model="logForm.password"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input
          style="width: 72%"
          v-model="logForm.captcha"
          placeholder="验证码"
          clearable
        ></el-input>
        <!-- 验证码 显示 -->
        <img
          alt="单击图片刷新！"
          style="position: absolute; top: 3.8rem; left: 0"
          :src="capUrl"
          @click="changeCap"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "logForm",
  data() {
    var checkName = (rule, value, callback) => {
      if (value == "" || value == null) {
        return callback(new Error("用户名不能为空"));
      } else if (this.nameErr) {
        return callback(new Error("用户名不存在"));
      }
      callback();
    };

    var validatePass = (rule, value, callback) => {
      if (value == "" || value == null) {
        callback(new Error("请输入密码"));
      } else if (this.pwdErr) {
        callback(new Error("密码错误"));
      }
      callback();
    };
    var validateChar = (rule, value, callback) => {
      if (value == "" || value == null) {
        callback(new Error("请输入验证码"));
      }
      callback();
    };
    return {
      nameErr: false,
      pwdErr: false, //登录验证密码
      capUrl: "http://60.205.247.68:9001/common/kaptcha",
      myInterval: null, // 重复执行函数标识，不为空则不再执行
      logForm: {
        username: "",
        password: '',
        captcha: "",
      },
      rules: {
        username: [{ validator: checkName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        captcha: [{ validator: validateChar, trigger: "blur" }],
      },
    };
  },
  methods: {
    changeCap() {
      this.capUrl = this.capUrl + "?d=" + new Date() * 1;
      this.logForm.captcha = "";
    },
    flashCap() {
      // 如果正在执行直接return
      if (this.myInterval) {
        return;
      }
      this.myInterval = setInterval(() => {
        this.changeCap();
      }, 60000);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("请求发送");
          this.$axios({
            url: "/user/Login",
            method: "post",
            data: JSON.stringify(this.logForm),
          })
            .then((res) => {
              console.log(res.data);
              if (res.data.status == 200) {
                this.$message.success("登录成功！");
                const loginUser = res.data.data;
                sessionStorage.setItem("loginUser", JSON.stringify(loginUser));
                setTimeout(() => {
                  this.$router.push("/home");
                }, 2000);
              } else {
                this.$message.error(res.data.msg);
                this.changeCap();
              }
            })
            .catch(() => {
              this.$message.error("服务器请求失败！");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.flashCap();
  },
  beforeCreate() {
    clearInterval(this.myInterval);
  },
};
</script>

<style scoped>
.logForm >>> .el-input input {
  height: 30px;
  border-radius: 10px;
}

</style>
